<template>
    <div>
        <el-dialog :destroy-on-close="true"
                   :title="isAddPage?'添加用户':'修改用户'"
                   :close-on-click-modal="false"
                   @close="closeDialog"
                   :visible="visible"
                   width="1000px">
    <div>

        <el-form ref="formRef" :model="form" :rules="rules"  label-width="120px" >
            <el-row>
                <el-col :span="8">
                    <div class="item_title" >基本信息</div>
                            <el-form-item label="用户名"  prop="userName">
                                <el-input v-model="form.userName"></el-input>
                            </el-form-item>
                            <el-form-item label="所属组织"  prop="orgID">
                                <el-cascader style="width:100%"
                                        v-model="form.orgID"
                                        :options="orgList"
                                        :props="orgProps"
                                ></el-cascader>
                            </el-form-item>

                            <el-form-item label="登录名"  prop="loginName">
                                <el-input v-model="form.loginName"></el-input>
                            </el-form-item>

                            <el-form-item v-if="!isAddPage" label="重置密码"  prop="isResetPwd">
                                <el-checkbox v-model="isResetPwd"></el-checkbox>
                            </el-form-item>

                            <el-form-item v-if="isResetPwd" label="密码"  prop="loginPwd">
                                <el-input  type="password" v-model="form.loginPwd"></el-input>
                            </el-form-item>

                            <el-form-item label="员工类型"  prop="userType">
                                <el-select v-model="form.userType" filterable  clearable class="w100"   >
                                    <el-option
                                            v-for="item in this.$constant.userTypeEnum"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="邮箱"  prop="email">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号"  prop="phoneNo">
                                <el-input v-model="form.phoneNo"></el-input>
                            </el-form-item>

                            <el-form-item label="是否启用"  prop="isEnable">
                                <el-checkbox v-model="form.isEnable"></el-checkbox>
                            </el-form-item>

                </el-col>
                <el-col :span="16" style="padding: 0px 0px 0px 10px ">
                    <div class="item_title" >权限信息</div>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="权限"  prop="isEnable">
                                <el-checkbox-group v-model="form.authIDList">
                                    <el-checkbox v-for="item in this.form.authList" :label="item.id"  >{{item.authName}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="角色"  prop="isEnable">
                                <el-checkbox-group v-model="form.roleIDList">
                                    <el-checkbox v-for="item in this.form.roleList" :label="item.id" >{{item.roleName}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>

            <el-row style="text-align: right">
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">保存</el-button>
                    <el-button @click="closeDialog" >取消</el-button>
                </el-form-item>
            </el-row>

        </el-form>


    </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {
        },
        props: ['visible'],
        data() {
            return {
                isAddPage:true,
                isResetPwd:false,
                checkList:[],
                orgProps:{
                    value: 'id',
                    label: 'orgName',
                    emitPath:false,
                },
                orgList:[],
                originalLoginName:null,
                form: {
                    isEnable:true,
                    authList:[
                    ],
                    authIDList:[],
                    roleList:[
                    ],
                    roleIDList:[],
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    loginName: [
                        { required: true, validator:this.validatorLoginName, trigger: 'blur' },
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    loginPwd: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                        { min: 6, max: 64, message: '长度在 6 到 64 个字符', trigger: 'blur' }
                    ],
                    orgID: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                    ],
                    userType: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                    ],
                    email: [
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    phoneNo: [
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],

                },
                dataTableHeight:370,
                loading:false,
            }
        },
        created() {


        },
        mounted() {
            this.initOrg();
        },
        methods: {

            validatorLoginName(rule, value, callback){
                let _this=this;
                let url='/user/validateLoginName';
                let params={
                    originalNo:_this.originalLoginName,
                    newNo:value,
                };
                this.$utils.ajaxValidate(_this,url,params,value,callback);
            },
            closeDialog() {
                this.$emit('update:visible',false);
                //Object.assign(this.$data, this.$options.data());
            },

            submitForm(){
                let _this=this;
                let url='/user/save';
                if (!_this.isAddPage){
                    url='/user/update';
                    if (!_this.isResetPwd){
                        _this.form.loginPwd='aaa000';//做验证
                    }
                }
                this.$utils.submitFormData(_this,_this.$refs.formRef,url,_this.form,function (valid) {
                    //TODO 权限不能空
                    if (_this.form.authIDList.length===0){
                        _this.$message.error("请选择菜单权限");
                        valid=false;
                    }
                    if (valid){
                        if (!_this.isResetPwd){
                            _this.form.loginPwd='';
                        }
                    }
                    return valid;
                },function () {
                    _this.closeDialog();
                    _this.$emit('loadData', true);
                });
            },

            initData(orgRow){
                let orgID=orgRow!=null?orgRow.id:0;
                this.isAddPage=true;
                this.isResetPwd=true;
                this.form={
                    isEnable:true,
                    orgID:orgID,
                }
                let _this=this;
                setTimeout(function(){
                    //获取新用户对象
                    _this.$http.post('/user/getNewUser').then(function(res){
                        if(res.data.success){
                            _this.form=res.data.data;
                            _this.form.orgID=orgID;
                            _this.originalLoginName=null;
                            _this.form.loginName=null;
                            _this.form.loginPwd=null;

                            //_this.loadMenuData(_this.form.id);
                        }else{
                            _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                        }
                    },function(){
                        _this.$message.error('操作失败！');
                    });

                }, 100);

            },
            cleanNullChildren(rows){
                let _this=this;
                /*rows.forEach(function (row) {
                    if (row.children.length===0){
                        row.children=null;
                    }else{
                        _this.cleanNullChildren(row.children);
                    }
                });*/
            },
            initOrg(){
                let _this=this;
                //获取组织
                _this.$http.post('/org/dataList',{}).then(function(res){
                    if(res.data.success){
                        _this.orgList=res.data.data;
                        _this.cleanNullChildren(_this.orgList);
                    }else{
                        _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                    }
                },function(){
                    _this.$message.error('操作失败！');
                });
            },

            loadData(userRow){
                let _this=this;
                this.isAddPage=false;
                this.isResetPwd=false;
                setTimeout(function(){
                    //获取用户
                    _this.$http.post('/user/getUser/'+userRow.id).then(function(res){
                        if(res.data.success){
                            _this.form=res.data.data;
                            _this.form.loginPwd='';
                            _this.originalLoginName=JSON.parse(JSON.stringify(_this.form.loginName))
                            //_this.loadMenuData(_this.form.id);
                        }else{
                            _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                        }
                    },function(){
                        _this.$message.error('操作失败！');
                    });
                }, 100);
            },
        },

        filters: {

        },
        watch:{

        }
    }

</script>
